<template>
    <div class="app-container home">
        <el-row :gutter="20">
            <el-col :sm="24" :lg="24">
                <template>
                    <el-carousel :interval="3000" type="card" height="400px">
                        <el-carousel-item v-for="item in imgList" :key="item.id">
                            <img :src="item.idView" class="image" />
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :sm="24" :lg="12" style="padding-left: 20px">
                <h2>电子商务进销存系统</h2>
                <p>
                    进销存系统是为了对企业生产经营中进货、出货、批发销售、付款等全程进行（从接获订单合同开始、进入物料采购、入库、领用到产品完工入库、交货、回收货款、支付原材料款等）跟踪（每一步都提供详尽准备的数据）、管理（有效辅助企业解决业务管理、分销管理、存货管理、营销计划的执行合监控、统计信息的收集等方面的业务问题）而设计的整套方案。
                </p>
                <p>
                    <b>当前版本:</b> <span>v{{ version }}</span>
                </p>
                <p>
                    <el-tag type="danger">测试版本</el-tag>
                </p>
            </el-col>

            <el-col :sm="24" :lg="12" style="padding-left: 50px">
                <el-row>
                    <el-col :span="12">
                        <h2>技术选型</h2>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <h4>后端技术</h4>
                        <ul>
                            <li>SpringBoot</li>
                            <li>Spring Security</li>
                            <li>JWT</li>
                            <li>MyBatis</li>
                            <li>Druid</li>
                            <li>Fastjson</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                    <el-col :span="6">
                        <h4>前端技术</h4>
                        <ul>
                            <li>Vue</li>
                            <li>Element-ui</li>
                            <li>Axios</li>
                            <li>...</li>
                        </ul>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <span>联系信息</span>
                    </div>
                    <div class="body">
                        <span>电子邮箱：110@163.com</span>
                        <p/>
                        <span>手机号码：96123</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <span>更新日志</span>
                    </div>
                    <span>暂无更新</span>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <span>开发团队</span>
                    </div>
                    <div class="body">
                        快开发项目组
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                // 版本号
                version: "1.0.1",
                // 轮播图
                imgList:[
                    {id:0,idView: require("@/assets/slideImages/pexels-pixabay-462024.jpg")},
                    {id:1,idView: require("@/assets/slideImages/pexels-krivec-ales-547115.jpg")},
                    {id:2,idView: require("@/assets/slideImages/login-background.jpg")},
                    {id:3,idView: require("@/assets/slideImages/pexels-pixabay-258109.jpg")},
                ],
            };
        },
        methods: {
            goTarget(href) {
                window.open(href, "_blank");
            },
        },
    };
</script>

<style scoped lang="scss">
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    img {
        /*设置图片宽度和浏览器宽度一致*/
        width: 100%;
        height: inherit;
    }
    .home {
        blockquote {
            padding: 10px 20px;
            margin: 0 0 20px;
            font-size: 17.5px;
            border-left: 5px solid #eee;
        }
        hr {
            margin-top: 20px;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eee;
        }
        .col-item {
            margin-bottom: 20px;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px;
        color: #676a6c;
        overflow-x: hidden;

        ul {
            list-style-type: none;
        }

        h4 {
            margin-top: 0px;
        }

        h2 {
            margin-top: 10px;
            font-size: 26px;
            font-weight: 100;
        }

        p {
            margin-top: 10px;

            b {
                font-weight: 700;
            }
        }

        .update-log {
            ol {
                display: block;
                list-style-type: decimal;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0;
                margin-inline-end: 0;
                padding-inline-start: 40px;
            }
        }
    }
</style>
